import React from 'react';
import { Box, Typography, Grid, Container } from '@mui/material';
import HeroCarousel from '../components/HeroCarousel';
import CategoryNav from '../components/CategoryNav';
import GameCard from '../components/GameCard';

// 示例数据
const featuredGames = [
  {
    id: 1,
    title: '塞尔达传说：王国之泪',
    imageUrl: 'https://via.placeholder.com/300x200',
    tags: ['动作', '冒险', '开放世界'],
    rating: 4.8,
    price: '¥298',
  },
  {
    id: 2,
    title: '博德之门3',
    imageUrl: 'https://via.placeholder.com/300x200',
    tags: ['RPG', '策略', '奇幻'],
    rating: 4.9,
    price: '¥298',
  },
  {
    id: 3,
    title: '星空',
    imageUrl: 'https://via.placeholder.com/300x200',
    tags: ['RPG', '科幻', '开放世界'],
    rating: 4.5,
    price: '¥298',
  },
  {
    id: 4,
    title: '最终幻想16',
    imageUrl: 'https://via.placeholder.com/300x200',
    tags: ['动作', 'RPG', '奇幻'],
    rating: 4.6,
    price: '¥398',
  },
];

const newGames = [
  {
    id: 5,
    title: '街头霸王6',
    imageUrl: 'https://via.placeholder.com/300x200',
    tags: ['格斗', '动作'],
    rating: 4.7,
    price: '¥298',
  },
  {
    id: 6,
    title: '死亡岛2',
    imageUrl: 'https://via.placeholder.com/300x200',
    tags: ['动作', '生存', '僵尸'],
    rating: 4.3,
    price: '¥248',
  },
  {
    id: 7,
    title: '霍格沃茨之遗',
    imageUrl: 'https://via.placeholder.com/300x200',
    tags: ['动作', 'RPG', '奇幻'],
    rating: 4.4,
    price: '¥298',
  },
  {
    id: 8,
    title: '生化危机4重制版',
    imageUrl: 'https://via.placeholder.com/300x200',
    tags: ['恐怖', '动作', '生存'],
    rating: 4.8,
    price: '¥348',
  },
];

const Home = () => {
  return (
    <Box>
      <HeroCarousel />
      <Container maxWidth="lg">
        <CategoryNav />

        <Box sx={{ mb: 6 }}>
          <Typography variant="h4" gutterBottom sx={{ mb: 3 }}>
            热门推荐
          </Typography>
          <Grid container spacing={3}>
            {featuredGames.map((game) => (
              <Grid item key={game.id} xs={12} sm={6} md={3}>
                <GameCard game={game} />
              </Grid>
            ))}
          </Grid>
        </Box>

        <Box sx={{ mb: 6 }}>
          <Typography variant="h4" gutterBottom sx={{ mb: 3 }}>
            最新上线
          </Typography>
          <Grid container spacing={3}>
            {newGames.map((game) => (
              <Grid item key={game.id} xs={12} sm={6} md={3}>
                <GameCard game={game} />
              </Grid>
            ))}
          </Grid>
        </Box>
      </Container>
    </Box>
  );
};

export default Home;
